<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js参数练习计价器</title>
    <style>
        p,ul{ margin:0; padding:0; }
        em { font-style:normal; }
        strong{ font-weight: normal}
        li { list-style:none; }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oUl=document.getElementById("list");
            var oLi=document.getElementsByTagName("li");
            for(var i=0;i<oLi.length;i++){
                oLi[i].index=i;
                abc(oLi[i]);
            }
            function abc(li){
                var oBtn=li.getElementsByTagName("button");
                var oSpan=li.getElementsByTagName("span")[0];
                var oStrong=li.getElementsByTagName("strong")[0];
                var oEm=li.getElementsByTagName("em")[0];
                var price=parseFloat(oStrong.innerHTML);//单价
                var num=parseInt(oSpan.innerHTML);//数量
                oBtn[0].onclick=function(){
                    if(num>0){
                        num--;
                    }
                    oSpan.innerHTML=num;
                    oEm.innerHTML=num*price+"元";
                    var index=li.index;
                    count();
                }
                oBtn[1].onclick=function(){
                    num++;
                    oSpan.innerHTML=num;
                    oEm.innerHTML=num*price+"元";
                    count();
                }
            }
            function count(){
                var oSpan=oUl.getElementsByTagName("span");
                var oStrong=oUl.getElementsByTagName("em");
                var count=0;
                var money=0;
                var arr=[];
                for(var i=0;i<oSpan.length;i++){
                    count+=parseInt(oSpan[i].innerHTML);
                    money+=parseFloat(oStrong[i].innerHTML);
                    if(parseInt(oSpan[i].innerHTML)!=0){
                        var li= oSpan[i].parentNode;
                        var stron= li.getElementsByTagName("strong")[0];
                        arr.push(parseFloat( stron.innerHTML));
                    }
                }
                var max=0;
                for(var i=0;i<arr.length;i++){
                    max =arr[0];
                    if(arr[i]>max){
                        max=arr[i];
                    }
                }
                var oP=document.getElementsByTagName("p")[0];
                var cSpan=oP.getElementsByTagName("span")[0];
                var cStrong=oP.getElementsByTagName("strong")[0];
                var cP=oP.getElementsByTagName("em")[0];
                cSpan.innerHTML=count+"件";
                cStrong.innerHTML=money+"元";
                cP.innerHTML=max+"元";
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li><button>-</button><span>0</span><button>+</button>单价：<strong>12.5元</strong>小计：<em>0元</em></li>
    <li><button>-</button><span>0</span><button>+</button>单价：<strong>10.5元</strong>小计：<em>0元</em></li>
    <li><button>-</button><span>0</span><button>+</button>单价：<strong>10元</strong>小计：<em>0元</em></li>
    <li><button>-</button><span>0</span><button>+</button>单价：<strong>11元</strong>小计：<em>0元</em></li>
    <li><button>-</button><span>0</span><button>+</button>单价：<strong>8元</strong>小计：<em>0元</em></li>
</ul>
<p>商品共计共：<span>0件</span>，共花了<strong>0元</strong><br>
 其中最贵商品的单价是<em>0元</em>
</p>

</body>
</html>